<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem to="/cart">购物车</XtxBreadItem>
        <XtxBreadItem>填写订单</XtxBreadItem>
      </XtxBread>
      <div class="wrapper">
        <!-- 收货地址 -->
        <h3 class="box-title">收货地址</h3>
        <div class="box-body">
          <div class="address">
            <div class="text">
              <ul v-if="userAddress.id">
                <li><span>收<i />货<i />人：</span>{{ userAddress.receiver }}</li>
                <li><span>联系方式：</span>{{ userAddress.contact }}</li>
                <li><span>收货地址：</span>{{ userAddress.fullLocation }}</li>
              </ul>
              <div class="none" v-else>您需要先添加收货地址才可提交订单。</div>
            </div>
            <div class="action">
              <XtxButton class="btn" @click="isShow = true">切换地址</XtxButton>
              <XtxButton class="btn" @click="addVisible = true">添加地址</XtxButton>
            </div>
          </div>
        </div>
        <!-- 商品信息 -->
        <h3 class="box-title">商品信息</h3>
        <div class="box-body">
          <table class="goods">
            <thead>
              <tr>
                <th width="520">商品信息</th>
                <th width="170">单价</th>
                <th width="170">数量</th>
                <th width="170">小计</th>
                <th width="170">实付</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in infoObj.goods" :key="item.skuId">
                <td>
                  <a href="javascript:;" class="info">
                    <img :src="item.picture" alt="picture">
                    <div class="right">
                      <p>{{ item.name }}</p>
                      <p>{{ item.attrsText }}</p>
                    </div>
                  </a>
                </td>
                <td>&yen;{{ item.price }}</td>
                <td>{{ item.count }}</td>
                <td>&yen;{{ item.totalPrice }}</td>
                <td>&yen;{{ item.totalPayPrice }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 配送时间 -->
        <h3 class="box-title">配送时间</h3>
        <div class="box-body">
          <a class="my-btn" href="javascript:;" :class="{ active: deliveryTimeType === 1 }"
            @click="deliveryTimeType = 1">不限送货时间：周一至周日</a>
          <a class="my-btn" href="javascript:;" :class="{ active: deliveryTimeType === 2 }"
            @click="deliveryTimeType = 2"> 工作日送货：周一至周五 </a>
          <a class=" my-btn" href="javascript:;" :class="{ active: deliveryTimeType === 3 }"
            @click="deliveryTimeType = 3">双休日、假日送货：周六至周日</a>
        </div>
        <!-- 支付方式 -->
        <h3 class="box-title">支付方式</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;">在线支付</a>
          <a class="my-btn" href="javascript:;">货到付款</a>
          <span style="color:#999">货到付款需付5元手续费</span>
        </div>
        <!-- 金额明细 -->
        <h3 class="box-title">金额明细</h3>
        <div class="box-body">
          <div class="total" v-if="infoObj.summary">
            <dl>
              <dt>商品件数：</dt>
              <dd>{{ infoObj.summary.goodsCount }}件</dd>
            </dl>
            <dl>
              <dt>商品总价：</dt>
              <dd>¥{{ infoObj.summary.totalPrice.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>运<i></i>费：</dt>
              <dd>¥{{ infoObj.summary.postFee.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>应付总额：</dt>
              <dd class="price">¥{{ infoObj.summary.totalPayPrice.toFixed(2) }}</dd>
            </dl>
          </div>
        </div>
        <!-- 提交订单 -->
        <div class="submit">
          <XtxButton type="primary" @click="handleSubmitOrder">提交订单</XtxButton>
        </div>
      </div>

      <Teleport to="#wrapper">
        <!-- 地址弹框 -->
        <xtx-dialog title="切换地址" :visible="isShow" @close="isShow = false" id="BOX">
          <!-- 历史收货地址 -->
          <div class="addressWrapper">
            <div class="text item" v-for="item in infoObj.userAddresses" :key="item.id"
              :class="{ active: selectedAddress.id === item.id }" @click="selectedAddress = item">
              <ul>
                <li>
                  <span>收<i />货<i />人：</span>{{ item.receiver }}
                </li>
                <li><span>联系方式：</span>{{ item.contact }}</li>
                <li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li>
              </ul>
            </div>
          </div>
          <!-- 确定与取消按钮 -->
          <template #footer>
            <XtxButton type="gray" style="margin-right: 20px" @click="isShow = false">取消</XtxButton>
            <XtxButton type="primary" @click="handleOK">确认</XtxButton>
          </template>
        </xtx-dialog>
      </Teleport>

      <!-- 添加地址弹框 -->
      <XtxDialog title="添加收货地址" :visible="addVisible" @close="addVisible = false">
        <div class="address-edit">
          <div class="xtx-form">
            <div class="xtx-form-item">
              <div class="label">收货人：</div>
              <div class="field">
                <input v-model="formData.receiver" class="input" placeholder="请输入收货人" />
              </div>
            </div>
            <div class="xtx-form-item">
              <div class="label">手机号：</div>
              <div class="field">
                <input v-model="formData.contact" class="input" placeholder="请输入手机号" />
              </div>
            </div>
            <div class="xtx-form-item">
              <div class="label">地区：</div>
              <div class="field">
                <XtxCity placeholder="请选择所在地区" @change="changeCty" v-model="formData.fullLocation" />
              </div>
            </div>
            <div class="xtx-form-item">
              <div class="label">详细地址：</div>
              <div class="field">
                <input v-model="formData.address" class="input" placeholder="请输入详细地址" />
              </div>
            </div>
            <div class="xtx-form-item">
              <div class="label">邮政编码：</div>
              <div class="field">
                <input v-model="formData.postalCode" class="input" placeholder="请输入邮政编码" />
              </div>
            </div>
            <div class="xtx-form-item">
              <div class="label">地址标签：</div>
              <div class="field">
                <input v-model="formData.addressTags" class="input" placeholder="请输入地址标签，逗号分隔" />
              </div>
            </div>
          </div>

        </div>
        <template #footer>
          <XtxButton type="gray" style="margin-right: 20px">取消</XtxButton>
          <XtxButton type="primary" @click="handleSubmit">确认</XtxButton>
        </template>
      </XtxDialog>
    </div>
  </div>
</template>
<script>
import { checkoutInfoAPI } from '@/api/cart'
import { ref, reactive } from 'vue'

import { insertAddressAPI, createOrderAPI } from '@/api/order'
import { message } from '@/components/Message'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'XtxPayCheckoutPage',
  setup () {
    const store = useStore()
    const router = useRouter()
    // 信息对象（包含商品列表、计算结果+收货地址）
    const infoObj = ref({})
    const isShow = ref(false)
    // 展示的地址
    const userAddress = ref({})
    // 选中的地址
    const selectedAddress = ref({})
    // 添加地址弹框的可见性
    const addVisible = ref(false)
    checkoutInfo()
    // 获取确认信息
    async function checkoutInfo () {
      // 1. 发请求、获取数据
      const resp = await checkoutInfoAPI()
      // 2. 保存数据
      infoObj.value = resp.result
      // 3. 保存第一个地址
      userAddress.value = infoObj.value.userAddresses[0] || {}
      selectedAddress.value = infoObj.value.userAddresses[0] || {}
    }

    // 点击确定
    const handleOK = () => {
      // 1. 把选中地址赋值给展示的地址
      userAddress.value = selectedAddress.value
      // 2. 关闭弹层
      isShow.value = false
    }

    // 表单数据
    const formData = reactive({
      receiver: '',
      contact: '',
      provinceCode: '',
      cityCode: '',
      countyCode: '',
      address: '',
      postalCode: '',
      addressTags: '',
      isDefault: 0,
      fullLocation: ''
    })
    // 选择地区
    const changeCty = (data) => {
      formData.provinceCode = data.proviceCode
      formData.cityCode = data.cityCode
      formData.countyCode = data.countyCode
    }

    // 确定添加
    const handleSubmit = async () => {
      await insertAddressAPI(formData)
      message({ type: 'success', text: '新增地址成功' })
      addVisible.value = false
      checkoutInfo()
    }

    // 收集选择的配送时间类型，默认值是1
    const deliveryTimeType = ref(1)
    // 提交订单
    const handleSubmitOrder = async () => {
      // 1. 得有地址
      if (!userAddress.value.id) {
        return message({ type: 'warn', text: '请选择地址' })
      }
      // 2. 组装对象，作为参数
      const orderObj = {
        // 收货地址id
        addressId: userAddress.value.id,
        // 配送时间类型
        deliveryTimeType: deliveryTimeType.value,
        // 支付方式
        payType: 1,
        // 支付渠道
        payChannel: 1,
        // 卖家留言
        buyerMessage: '',
        // 购买的商品列表（映射skuId和count数组）
        goods: infoObj.value.goods.map(({ skuId, count }) => {
          return {
            skuId,
            count
          }
        })
      }
      // 3. 调用创建订单的接口
      const resp = await createOrderAPI(orderObj)
      // 4. 更新购物车列表
      await store.dispatch('cart/updateCartAction')
      // 5. 给个成功提示
      message({ type: 'success', text: '创建订单成功' })
      // 6. 跳转支付页
      router.push(`/pay/${resp.result.id}`)
    }

    return {
      infoObj,
      userAddress,
      isShow,
      selectedAddress,
      handleOK,
      addVisible,
      changeCty,
      formData,
      handleSubmit,
      handleSubmitOrder,
      deliveryTimeType
    }
  }
}
</script>
<style scoped lang="less">
.xtx-pay-checkout-page {
  .wrapper {
    background: #fff;
    padding: 0 20px;

    .box-title {
      font-size: 16px;
      font-weight: normal;
      padding-left: 10px;
      line-height: 70px;
      border-bottom: 1px solid #f5f5f5;
    }

    .box-body {
      padding: 20px 0;
    }
  }
}

.xtx-dialog {
  .addressWrapper {
    max-height: 400px;
    overflow-y: auto;
  }

  .address-edit {
    max-height: 300px;
    overflow-y: auto;
  }

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;

      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }

      >ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}

.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    >ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          >i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }

    >a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  .info {
    display: flex;
    text-align: left;

    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }

    .right {
      line-height: 24px;

      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }

  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }

    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;

      &:first-child {
        border-left: 1px solid #f5f5f5;
      }

      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}

.my-btn {
  width: 228px;
  height: 50px;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 48px;
  margin-right: 25px;
  color: #666666;
  display: inline-block;

  &.active,
  &:hover {
    border-color: @xtxColor;
  }
}

.total {
  dl {
    display: flex;
    justify-content: flex-end;
    line-height: 50px;

    dt {
      i {
        display: inline-block;
        width: 2em;
      }
    }

    dd {
      width: 240px;
      text-align: right;
      padding-right: 70px;

      &.price {
        font-size: 20px;
        color: @priceColor;
      }
    }
  }
}

.submit {
  text-align: right;
  padding: 60px;
  border-top: 1px solid #f5f5f5;
}

.xtx-city {
  margin-left: 0px;

  /deep/ .select {
    height: 50px;
    line-height: 50px;
  }

  /deep/ .select .value {
    font-size: 14px;
  }
}
</style>
